<template>
  <div id="mapEcharts">
    <!--<VEcharts  autoresize
                   :options="opts"
                   @click="aaa"
        ></VEcharts>-->
    <div class="map-imgs">
      <VEcharts
        autoresize
        :options="opts"
        style="width: 100%; height: 100%"
        @click="townClick"
      />
    </div>
    <!--        <canvas id="myCanvas" width="200" height="100"  style=" width: 100%;height: 100%;" ref="myCanvas"></canvas>-->
  </div>
</template>

<script>
import VEcharts from '@/components/vecharts';
// 深度克隆
function cloneUtil(target) {
  // 判断目标数据是对象还是数组
  // [object Array]  [object Object]  [object Function]
  const type = Object.prototype.toString.call(target);
  let res;
  if (type.includes('Array')) {
    res = [];
  } else if (type.includes('Object')) {
    res = {};
  } else {
    return '';
  }
  for (const i in target) {
    if (typeof target[i] === 'object') {
      res[i] = cloneUtil(target[i]);
    } else {
      res[i] = target[i];
    }
  }

  return res;
}
export default {
  'name': 'mapEcharts',
  'methods': {
    townClick(e) {
      this.$emit('into-town', e);
    }
  },
  data() {
    return {};
  },
  'components': {
    VEcharts
  },
  'props': {
    'myStyle': {
      'type': Number,
      'default': 1
    },
    'OrGanize': {
      'type': Array,
      default() {
        return [];
      }
    }
  },
  'computed': {
    realOrGanize() {
      // let newArr = [];
      // for (let item of this.OrGanize) {
      //     let obj = {
      //         'name': item.shortName,
      //         'value': getRandomNum(10000, 100000),
      //         'data': item
      //     };
      //     newArr.push(obj);
      // }

      const aaa = {
        'finishTime': '2020-09-28',
        'year': '2020',
        'rateMoney': 100,
        'enterPriseName': '沃洲镇',
        'ROW_ID': 1,
        'enterPriseCode': '018081',
        'checkStatus': 0,
        'money': '350,000.00',
        'proGramId': 2865,
        'noticeStatus': 0,
        'startTime': '2020-09-28',
        'proGramGroupId': 593,
        'proGramGroupName': '业务管理经费',
        'pMoney': '350,000.00',
        'shortName': '齐贤街道'
      };
      const newArr = [
        {
          'name': '齐贤',
          'value': 55555,
          'data': {
            ...aaa
          }
        },
        {
          'name': '柯桥区',
          'value': 6666,
          'data': {
            ...aaa
          }
        }
      ];
      return newArr;
    },
    mapbg0() {
      if (this.myStyle === 1) {
        return 'rgba(132, 192, 249,.9)';
      } else if (this.myStyle === 2) {
        return '#0b50b9';
      }
      return false;
    },
    mapbg1() {
      if (this.myStyle === 1) {
        return '#263238';
      } else if (this.myStyle === 2) {
        return '#1570ac';
      }
      return false;
    },
    mapFontbg() {
      if (this.myStyle === 1) {
        return 'white';
      } else if (this.myStyle === 2) {
        return '#00e3f9';
      }
      return false;
    },
    mapActiveItembg() {
      if (this.myStyle === 1) {
        return '#3499f9';
      } else if (this.myStyle === 2) {
        return '#004073';
      }
      return false;
    },
    opts() {
      const _this = this;
      const baseMap = {
        'name': '柯桥',
        'type': 'map',
        'mapType': 'keqiao',
        'roam': 'true', // 拖拽
        'aspectScale': 1.5, // 设置地图的长宽比 数值越大 高度越小 数值越小 宽度越小
        'zoom': 1.1, // 地图大小
        'itemStyle': {
          // 地图样式
          'normal': {
            'borderColor': '#26323869',
            'borderWidth': 1,
            'areaColor': '#88C2F9',
            'shadowColor': 'rgba(0, 0, 238,.02)',
            'shadowOffsetX': -2,
            'shadowOffsetY': 2,
            'shadowBlur': 5
          }
        },

        'emphasis': {
          // 鼠标移入动态的时候显示的默认样式
          'itemStyle': {
            'borderColor': '#26323869',
            'borderWidth': 1,
            'areaColor': '#88C2F9',
            'shadowColor': 'rgba(0, 0, 238,.02)',
            'shadowOffsetX': -2,
            'shadowOffsetY': 2,
            'shadowBlur': 5
          }
        },
        'showLegendSymbol': false, // 省份对应位子的红点
        'label': {
          'show': false,
          'offset': [120, 40],
          // 'normal': {
          //     'show': true,
          //     // 'color': _this.mapFontbg,
          //     'color': '#D9E9EA',
          //     'fontWeight': 600,
          //     'fontSize': 28,
          //     'formatter': '{b}'
          // },
          'emphasis': {
            'show': false,
            'color': _this.mapFontbg,
            'fontSize': 28,
            'fontWeight': 300,
            'formatter': '{b}'
          }
        },
        'layoutCenter': ['49%', '48%'],
        'layoutSize': '100%',
        'silent': true, // 鼠标悬浮事件禁用
        'data': _this.realOrGanize
      };

      const map1 = cloneUtil(baseMap);
      const map2 = cloneUtil(baseMap);
      const map3 = cloneUtil(baseMap);
      const map4 = cloneUtil(baseMap);
      const map5 = cloneUtil(baseMap);
      const map6 = cloneUtil(baseMap);
      const map7 = cloneUtil(baseMap);
      const map8 = cloneUtil(baseMap);
      const map9 = cloneUtil(baseMap);
      const map10 = cloneUtil(baseMap);

      map2.mapType = 'keqiao1';
      map3.mapType = 'keqiao2';
      map4.mapType = 'keqiao3';
      map5.mapType = 'keqiao4';
      map6.mapType = 'keqiao5';
      map7.mapType = 'keqiao6';
      map8.mapType = 'keqiao7';
      map9.mapType = 'keqiao8';
      map10.mapType = 'keqiao9';

      map2['layoutCenter'] = ['49%', '47.9%'];
      map3['layoutCenter'] = ['49%', '47.8%'];
      map4['layoutCenter'] = ['49%', '47.7%'];
      map5['layoutCenter'] = ['49%', '47.6%'];
      map6['layoutCenter'] = ['49%', '47.5%'];
      map7['layoutCenter'] = ['49%', '47.4%'];
      map8['layoutCenter'] = ['49%', '47.3%'];
      map9['layoutCenter'] = ['49%', '47.2%'];
      map10['layoutCenter'] = ['49%', '47.1%'];

      map1.itemStyle.normal = {
        'itemStyle': {
          'areaColor': _this.mapActiveItembg,
          'borderColor': '#0A0131',
          'borderWidth': 0.3,
          'shadowColor': 'rgba(0, 0, 0, .6)',
          'shadowBlur': 5,
          'shadowOffsetX': 2,
          'shadowOffsetY': 2
        }
      };

      return {
        'tooltip': {
          'formatter': '{b}'
        },
        'legend': {
          'show': false
        },
        'visualMap': {
          'show': false,
          'min': 60,
          'max': 666,
          'left': '60%',
          'top': 'bottom',
          'text': ['高', '低'],
          'calculable': false,
          'color': [_this.mapbg0, _this.mapbg1, 'red']// '#0b50b9','#1570ac'
          // 'pieces':[{lte:'齐贤镇',label:'齐贤镇'}],
          // 'inRange':['red']
        },
        // 'dataRange': {
        //   'x': 'left',
        //   'y': 'bottom',
        //   'splitList': [
        //     { start: 55555, end: 55556 },
        //     { start: 0, end: 55554 }
        //   ],
        //   'color': ['#4169e1', '#88C2F9']
        // },
        'selectedMode': 'single',
        'series': [
          map1,
          map2,
          map3,
          map4,
          map5,
          map6,
          map7,
          map8,
          map9,
          map10,

          {
            'name': '齐贤街道',
            'type': 'map',
            'mapType': 'keqiaozi',
            'roam': 'true', // 拖拽
            'aspectScale': 1.5, // 设置地图的长宽比 数值越大 高度越小 数值越小 宽度越小
            'zoom': 1.1, // 地图大小
            'itemStyle': {
              // 地图样式
              'normal': {
                'borderColor': 'rgba(3, 62, 140, 0.6)',
                'borderWidth': 1,
                'areaColor': {
                  'type': 'radial',
                  'x': 0.5,
                  'y': 0.5,
                  'r': 0.8,
                  'colorStops': [
                    {
                      'offset': 0,
                      'color': 'rgba(147, 235, 248, 0)' // 0% 处的颜色
                    },
                    {
                      'offset': 1,
                      'color': 'rgba(147, 235, 248, .2)' // 100% 处的颜色
                    }
                  ],
                  'globalCoord': false // 缺省为 false
                },
                // shadowColor: 'rgba(128, 217, 248, 1)',
                'shadowColor': 'rgba(0, 0, 238,.2)',
                'shadowOffsetX': -2,
                'shadowOffsetY': 2,
                'shadowBlur': 20
              }
            },
            'emphasis': {
              // 鼠标移入动态的时候显示的默认样式
              'itemStyle': {
                'areaColor': _this.mapActiveItembg,
                'borderColor': '#404a59',
                'borderWidth': 0.1,
                'shadowColor': 'rgba(0, 0, 0, .6)',
                'shadowBlur': 5,
                'shadowOffsetX': 2,
                'shadowOffsetY': 2
              }
            },
            'showLegendSymbol': false, // 省份对应位子的红点
            'label': {
              'normal': {
                'show': true,
                // 'color': _this.mapFontbg,
                'color': '#fff',
                'fontWeight': 500,
                'fontSize': 14,
                // 'formatter': '{b}',
                'formatter': '{b}'
              },
              'emphasis': {
                'show': true,
                'color': '#fff',
                // 'color': _this.mapFontbg,
                'fontSize': 22,
                'fontWeight': 600,
                'formatter': '{b}'
              }
            },
            'grid': {},
            'layoutCenter': ['49%', '47.1%'],
            'layoutSize': '100%',
            'data': _this.realOrGanize
          }
        ]

      };
    }
  },
  mounted() {
  }
};
</script>

<style scoped>
#mapEcharts {
  width: 100%;
  height: 100%;
  position: relative;
  top: 1rem;
}
.map-imgs {
  height: 100%;
  position: relative;
}

.map-imgs > img {
  width: 9rem;
  height: 9rem;
}
.jinglingzhen {
  position: absolute;
  bottom: 20%;
  left: 10%;
}
</style>
